<template>

    <div class="uploader">
        <UploadForm
            @selectFile="selectFileChose"
        />
        <UploadFile class="flex wrap"
             :baseURI="options.baseURI"
             :endpoint="getEndpoint(upload.file.type)"
             v-for="(upload, index) of uploads"
             :key="index"
             :upload="upload"
         />
    </div>

</template>

<script>
    import UploadForm from "./UploaderForm"
    import UploadFile from "./UploadFile"
    export default{
        props:{
            options:{
                require: true,
                type: Object,
                default(){
                    baseURI: ''
                }
            },
            handles:{
                require: true,
                type: Object
            }
        },
        data() {
            return {
                uploads : []
            };
        },
        components:{
            UploadForm,
            UploadFile
        },
        methods:{
            getEndpoint(type){
                console.log(type)
                return this.handles[type]['endpoint'];
            },
            selectFileChose(files){
                this.uploads.push(...Array.from(files).map((file) => { return { file } }))
            }
        }
    }
</script>
